define('pc/js/mod/write/Cate', [
    'pc/js/mod/write/cate.css',
    'utils/fetchEnhancer',
    'utils/XTemplate',
    'utils/helpers'], function(css, fetch, XTemplate, h){

var Category = function(id) {
    this.doc = document;

    this.html =
`<ul class="writing-category">
<% var list=data.list, cateId=data.cateId, outerName='', innerName=''; %>
<% for(var i=0,len=list.length; i<len; i++){ var sub=list[i]._child || []; %>
<% var outerActive=''; for(var x=0,size=sub.length; x<size; x++){ if(sub[x].id === cateId){outerActive=' active';} } %>
<li class="writing-category-item<%= outerActive %>">
    <span class="writing-category-item-text"><%= list[i].name %></span>
    <div class="writing-category-drop">
        <% for(var x=0,size=sub.length; x<size; x++){ var activeClass=''; %>
        <% if(sub[x].id === cateId) {outerName = list[i].name; innerName = sub[x].name; activeClass=' active'; } %>
        <a href="javascript:;" data-pname="<%= list[i].name %>" data-id="<%= list[i]._child[x].id %>" class="writing-category-drop-item<%= activeClass %>"><%= list[i]._child[x].name %></a>
        <% } %>
    </div>
</li>
<% } %>
</ul>
<div class="writing-category-picked">当前分类：<span><%= outerName ? outerName + '->' + innerName : '' %></span></div>`;

    this.cateId = '';
    this.wrapper = this.doc.getElementById(id);
    this.cateList = null;
    this.cateListItem = null;
    this.resultWrapper = null;

    this.dataList = null;

    this.temp = null;

    this.init();
};

Category.prototype = {
    constructor: Category,

    init: function() {
        this.temp = new XTemplate();
        this.temp.compile(this.html);
    },
    fetchData: function() {
        var _self = this;

        fetch('/api/category/list').then(function(json){
            if(0 === json.status) {
                _self.dataList = json.data.data;

                _self.render();
            }
        });
    },

    removeAllActive: function() {
        for(var i=0, len=this.cateList.length; i<len; i++) {
            this.cateList[i].className = 'writing-category-item';
        }

        for(var i=0, len=this.cateListItem.length; i<len; i++) {
            this.cateListItem[i].className = 'writing-category-drop-item';
        }
    },

    bindEvent: function() {
        var _self = this;

        this.wrapper.onmouseover = function(e) {
            var t = e.target;

            if('writing-category-item-text' === t.className) {
                t.parentNode.querySelector('.writing-category-drop')
                    .removeAttribute('style');
            }
        };

        this.wrapper.onclick = function(e) {
            var t = e.target;

            if('A' === t.nodeName.toUpperCase()) {
                _self.cateId = t.getAttribute('data-id');

                _self.removeAllActive();
                t.className += ' active';
                t.parentNode.parentNode.className += ' active';

                _self.resultWrapper.innerHTML = t.getAttribute('data-pname') + '->' + t.innerHTML;

                t.parentNode.style.display = 'none';
            }
        };
    },

    render: function() {
        var ret = this.temp.run({
            list: this.dataList,
            cateId: this.cateId
        });

        this.wrapper.innerHTML = ret;

        // 缓存列表
        this.cateList = this.wrapper.querySelectorAll('.writing-category-item');
        this.cateListItem = this.wrapper.querySelectorAll('a');
        this.resultWrapper = this.wrapper.querySelector('.writing-category-picked').querySelector('span');

        this.bindEvent();
    },

    getValue: function() {
        return this.cateId;
    },
    setValue: function(cateId) {
        this.cateId = cateId;

        if(null !== this.dataList) {
            this.render();
        }
    }
};

return {
    init: function(id) {
        var cate = new Category(id);

        cate.fetchData();

        return cate;
    }
};
});

